<style>
    .nav-bar{
        max-width: 1200px;
        margin: 0 auto;
        background: #787a7e;
        font-size: 18px;
        font-weight: bold;
    }
    .nav{
        height: 2em;
        line-height: 2em;
    }
    .nav-item,
    .nav-more{
        color: #fff;
        padding: 0 .5em;
    }
    .nav-item-active{
        background: #333;
    }
    .nav-drop{
        background: #787a7e;
    }
    .nav-drop .nav-item{
        display: block;
        padding: .5em 1em;
    }
</style>
<template>
    <div id="nav-bar" class="nav-bar">
        <nav class="nav">
            <a class="nav-item nav-item-active" href="#">首頁</a>
            <a class="nav-item" href="#">今日文匯</a>
            <a class="nav-item" href="#">快訊</a>
            <a class="nav-item" href="#">視頻</a>
            <a class="nav-item" href="#">圖輯</a>
            <a class="nav-item" href="#">調查</a>
            <a class="nav-item" href="#">討論區</a>
            <a class="nav-item" href="#">專題</a>
            <a class="nav-item" href="#">消費指南</a>
            <a class="nav-item" href="#">招商專區</a>
            <a class="nav-more" href="javascript:void(0)">...</a>
        </nav>
    </div>
</template>
<script>
    new Rnav('nav-bar');
</script>
